<template>
  <div class="bg">
     <span style="float:right;margin-right: 10px">
             <a @click="localPage" style="color: yellow"> 首页</a>
            </span>
    <h1 style="text-align: center;color: yellow">发布文章</h1>

<!--    &lt;!&ndash;页头组件&ndash;&gt;-->
    <el-divider></el-divider>
    <!--      <el-card>-->
    <el-form style="width: 100%;margin: 30px 0" label-width="80px" >
      <el-row>
        <el-col :span="8">
          <el-form-item label="文章标题"  class="item">
            <el-input type="text" v-model="article.title" placeholder="请输入文章标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关键词"  class="item">
            <el-input type="text" v-model="article.keywords" placeholder="请输入文章关键词"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="添加分类" class="item">
            <el-select v-model="article.category" placeholder="请选择"
            >
              <el-option v-for="c in categoryArr"
                         :key="c.id"  :value="c.name" :label="c.name" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-form-item  class="item" label="添加标签"  prop="tags">
          <el-tag
              v-for="(item,index) of article.tags"
              :key="index"
              style="margin:0 1rem 0 0"
              :closable="true"
              @close="removeTag(item)"
          >{{item}}</el-tag>
          <!-- 标签选项 -->
          <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              v-if="article.tags && article.tags.length < 3"
          >
            <div class="popover-title">标签</div>
            <div class="popover-container">
              <el-tag
                  size="medium"
                  v-for="(item,index) of tags"
                  :key="index"
                  style="margin-left: 3px;margin-top: 2px"
                  :class="tagClass(item)"
                  @click="addTag(item)"
              >
                {{item}}
              </el-tag>
            </div>
            <el-button type="primary" plain slot="reference" size="small">添加标签</el-button>

          </el-popover>
        </el-form-item>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item  class="item" label="文章图片" align="left" :span="6" >
            <!--添加上传文件的组件-->
            <!--***************************************-->
            <!--action代表提交地址  name代表文件上传时的参数名称
            limit用来限制图片数量-->
            <el-upload
                action="http://localhost:9090/upload"
                :limit="1"
                name="picFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <!--***************************************-->
          </el-form-item>

        </el-col>
        <el-col :span="12">
          <el-form-item  class="item" label="发布状态"   >
<!--            <el-radio   v-model="article.status" label="0" border style="color: yellow">下架</el-radio>-->
            <el-radio  v-model="article.status" label="1" border style="color: yellow">发布</el-radio>
            <el-radio  v-model="article.status" label="2" border style="color: yellow">草稿箱</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item  class="item" label="创作类型" >
            <el-radio v-model="article.isOriginal" label="0" border style="color: yellow">转载</el-radio>
            <el-radio v-model="article.isOriginal" label="1" border style="color: yellow">原创</el-radio>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item  class="item" label="文章简介" :span="12">
            <el-input type="textarea" maxlength="80" v-model="article.brief"  placeholder="请输入文章简介"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item  :span="24">
        <mavon-editor style="width: 100%; height:500px;" v-model="article.content"/>
      </el-form-item>

      <el-form-item  >
        <el-button style="position:relative;left:650px" @click="insert()">发布文章</el-button>
      </el-form-item>

    </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {

      dialogImageUrl: '',
      dialogVisible: false,
      categoryArr: [],
      tagName:"",
      tags:[],

      article:{title: "", avatar: "", brief: "",content: "", category:"",viewPicture:"",
        status:'',isOriginal:"",OriginalUrl:"",remark:"",keywords:"",tags:[]
      },
      ruleForm: [],
      rules:
          {
            'title': [{required: true, message: '必填字段', trigger: 'blur'}],
            'summary': [{required: true, message: '必填字段', trigger: 'blur'}],
            // 'tags': [{required: true, message: '必填字段', trigger: 'blur'}],
            'categoryName': [{required: true, message: '必填字段', trigger: 'blur'}],
            'isSecret': [{required: true, message: '必填字段', trigger: 'change'}],
            'isStick': [{required: true, message: '必填字段', trigger: 'change'}],
            'isPublish': [{required: true, message: '必填字段', trigger: 'change'}],
            'isOriginal': [{required: true, message: '必填字段', trigger: 'change'}],
            'originalUrl': [{required: true, message: '必填字段', trigger: 'blur'}],
            'contentMd': [{required: true, message: '必填字段', trigger: 'change'}]
          }
    }

  },
  computed: {
    tagClass() {
      return function(item) {
        const index = this.article.tags.indexOf(item.name);
        return index !== -1 ? "tag-item-select" : "tag-item";
      };
    },
  },
  created:function () {
    //请求所有分类数据
    let url='http://localhost:9090/system/category'
    console.log("url="+url)
    this.axios.get(url).then( (response)=> {
      console.log(response.data)
      this.categoryArr = response.data.data;
      console.log(this.categoryArr)
    })
    //请求所有分类数据
    url='http://localhost:9090/tags/select'
    console.log("url="+url)
    this.axios.get(url).then( (response)=> {
      console.log(response.data)
      let array = response.data.data;
      for (let i = 0; i < array.length; i++) {
        this.tags.push(array[i].name)
      }
      console.log(this.tags)
    })
  },
  methods: {


    addTag:function (item){
      if (this.article.tags.length > 2 ){
        this.$message.error("最多添加三个标签,如需继续添加,请先删除一个!")
        return false;
      }
      if (this.article.tags.indexOf(item) === -1) {

        this.article.tags.push(item);
      }
    },
    saveTag:function (){
      if (this.tagName.trim() !== "") {
        this.addTag({
          name: this.tagName
        });
        this.tagName = "";
      }
    },
    removeTag: function (item){

      const index = this.article.tags.indexOf(item);
      this.article.tags.splice(index, 1);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //发请求告诉服务器删除文件夹里面的文件
      //得到要删除的文件名

      let fileName =""+file.response
      alert(fileName)
      this.axios.post("http://localhost:9090/remove",fileName).then(function (response) {
        console.log("服务器文件删除完成!");
      })
      this.article.url = "";
    },
    handlePictureCardPreview(file) {
      console.log(file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*添加文章*/
    insert() {
      if (this.article.title == ""||this.article.viewPicture == ""||this.article.brief == ""||this.article.content == ""
          ||this.article.status == "" ||this.article.category == ""||this.article.isOriginal == ""
          ||this.article.keywords == ""||this.article.tags.length == 0
      ) {
        this.$message.error("请添加完整文章的数据!");
        return;
      }

      let url='http://localhost:9090/system/articles/add-new'
      //发出异步请求
      this.axios.post(url, this.article).then( (response)=> {
        if(response.data.code==200){
          this.$message({
            message:'添加文章成功！',
            type:'success'
          });
          this.reload()
        }else if(response.data.code==409){
          this.$message.error("商品添加失败，商品名已存在!");

        }else {
          this.$message.error("服务器出错")
        }
      }).catch(function (error) {
        console.log("响应失败！！！")
      })
    },

    handleSuccess(response, file, fileList) {
      console.log("上传文件成功!")
      console.log("response=" + response)
      console.log("file=" + file);
      this.article.viewPicture = response;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /*首页*/
    localPage(){
      this.$router.push({
        path: '/',
      })
    },
  }


}
</script>

<style >
.item .el-form-item__label{
  color: yellow;
}
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://ts1.cn.mm.bing.net/th/id/R-C.51676491f69a1c1b3b043035c7565760?rik=ahRHaUMH3E02lg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fb%2f2019%2f09-13%2f69781%2fbeijing_pic_69781_1200_600.jpg&ehk=F9XpXpcQR%2f3zuIkcEWrvMl8myfV4bm%2fwfw4lDwMbVy8%3d&risl=&pid=ImgRaw&r=0');
  background-size: 100% 100%;
  /*background-color: #2d3a4b;*/
  overflow: auto;
}
.lableColor{
  color: black;
}
</style>